{% extends 'cms/cms_base.html' %}
{% from 'common/_macros.html' import static %}
{% block title -%}
    轮播图管理
{%- endblock %}

{% block head -%}
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
    <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
    <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
    <script src="{{ static('common/zlqiniu.js') }}"></script>
    <script src="{{ static('cms/js/banner.js') }}"></script>
    <style>
        .top-box button {
            float: right;
        }
    </style>
{%- endblock %}

{% block page_title -%}
    {{ self.title() }}
{%- endblock %}

{% block main_content -%}
    <div class="top-box">
        <button class="btn btn-warning" data-toggle="modal" data-target="#myModal">添加轮播图</button>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>名称</th>
            <th>图片链接</th>
            <th>跳转链接</th>
            <th>优先级</th>
            <th>创建时间</th>
            <th colspan="2">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for banner in banners %}
            <tr data-name="{{ banner.name }}" data-image_url="{{ banner.image_url }}"
                data-link_url="{{ banner.link_url }}" data-priority="{{ banner.priority }}" data-id="{{ banner.id }}">
                <td>{{ banner.name }}</td>
                <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>
                <td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>
                <td>{{ banner.priority }}</td>
                <td>{{ banner.create_time }}</td>
                <td>
                    <button class="btn btn-default btn-xs edit-banner-btn" title="编辑">编辑</button>
                    <button class="btn btn-danger btn-xs delete-banner-btn" title="删除">删除</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <!-- 添加轮播图的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">输入要添加信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">名称：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" placeholder="输入轮播图名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">图片：</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="image_url" placeholder="输入图片路径地址">
                            </div>
                            <button class="btn btn-info col-sm-2" id="upload-btn">选择图片</button>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">跳转：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="link_url" placeholder="输入图片跳转路径">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">权重：</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" name="priority" placeholder="优先级顺序">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="save-banner-btn" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end -->
{%- endblock %}